<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./common.css">
</head>

<body>
    domain,组织文件，向用户提供很多资源
    链接把资源组织起来
    一切皆资源
    <div class="wrapper">
        <ul class="nav">
            <li><a href="index.html">Home</a></li>
            <li><a href="fluffy.html">Fluffy</a></li>
            <li><a href="socks.html">Socks</a></li>
            <li><a href="whiskers.html">Whiskers</a></li>
        </ul>
        <p class="content">Welcome to Kittens! Home of Fluffy, Socks, and Whiskers. If you're not suffering from a cute
            overdose within the hour, then you really are a heartless bugger! Now lets look at some cats!</p>
        <div class="media">
            <img class="photo" src="http://www.ichong123.com/uploads/2014/08/m1.jpg" alt="index" />
        </div>
    </div>
    <script>
        //传统web网站 发起优化
        // ajax 刷新整个页面  不用白一下
        //封装
        function getHtml(href, callback) {
            const xhr = new XMLHttpRequest();//web 2.0
            xhr.open("GET", href);
            xhr.send();
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4) {//服务器响应  完全到达了
                    //0 未启动； 1 完成启动； 2 完成发送；3 已接受部分数据；4 完成
                    console.log(xhr.responseText);
                    callback(xhr.responseText);
                }
            }
        }
        //. 匹配任意字符除外
        //+ 匹配一次或多次
        //()分组
        function createState(data) {
            const contentMatches = data.match(/class="content">(.+)newborn/)
            console.log(contentMatches);
            // const content = contentMatches[1];
            // console.log(content);
            const photoMatches = data.match(/img.+src="(.+)"\s/)
            console.log(photoMatches);
            // const photo = photoMatches[1];
            // console.log(photo)
            return {
                content,
                photo
            }
        }

        //生命周期，所有资源都加载完成
        // window.onload=function(){ }

        window.addEventListener('DOMContentLoaded', function () {
            console.log('loaded');
            //比load 更早的  js运行,交互
            const links = document.querySelectorAll('.nav li a');
            links.forEach(link => {
                link.addEventListener('click', function (event) {
                    // 传统a 点完就白屏
                    event.preventDefault();
                    // let href= this.href;
                    let href = event.target.href;
                    // const xhr=new XMLHttpRequest();
                    getHtml(href, function (data) {
                        //callback
                        // console.log(data)
                        // 正则过程,  新状态
                        let state = createState(data);
                        // console.log(state);
                        document.querySelector('.content').innerText = state.content;
                        document.querySelector('.photo').src = state.photo;
                    })
                })
            })
        })
    </script>
</body>

</html>